<template >
  <div class="top">
    <div class="bigcord">
      <div class="cord">
        <div class="top">
          <span class="tongji">工单统计</span>
          <span class="shijian">2022.08.01 ~ 2022.08.18</span>
        </div>
        <div class="bot">
          <div class="box">
            <span class="sum">230</span>
            <span class="sum1">工单总数</span>
          </div>
          <div class="box">
            <span class="sum">0</span>
            <span class="sum1">完成工单</span>
          </div>
          <div class="box">
            <span class="sum">0</span>
            <span class="sum1">进行工单</span>
          </div>
          <div class="box">
            <span class="sum">228</span>
            <span class="sum1">取消工单</span>
          </div>
        </div>
      </div>
      <div class="cord">
        <div class="top">
          <span class="tongji">销售统计</span>
          <span class="shijian">2022.08.01 ~ 2022.08.18</span>
        </div>
        <div class="bot">

          <div class="box">
            <span class="sum">7976</span>
            <span class="sum1">订单数</span>
          </div>
          <div class="box">
            <span class="sum">5.49</span>
            <span class="sum1">销售额(万)</span>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="ringt">
    <div class="cen">
      <div class="echarts" ref="zhexiantu"></div>
    </div>
    <div class="echarts1">
      <div class="echarts" ref="tongji"></div>
    </div>
  </div>
  <div class="bottom">
    <div class="echartss" ref="bintu"></div>
  </div>
  <div class="yichang">
    <div>
      <span class="shebei">异常设备监控</span>
    </div>
    <div class="tupian">
      <div class="img"><img class="kkk" src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="不想玩了"></div>
      <span class="span">暂无数据</span>
    </div>
  </div>
  <div class="xiaoshoubang">
    <div class="rightt">
      <span class="span1">商品热榜</span>
      <span class="span2">2022.08.01 ~ 2022.08.18</span>
    </div>
    <div class="item">
      <div class="img"><img src="" alt="">
        <div>1</div>
      </div>
      <div class="good">{{GoodList[0]?.skuName}}</div>
      <div class="danzi">{{GoodList[0]?.count}}单</div>
    </div>
    <div class="item">
      <div class="img"><img src="" alt="">
        <div>2</div>
      </div>
      <div class="good">{{GoodList[1]?.skuName}}</div>
      <div class="danzi">{{GoodList[1]?.count}}单</div>
    </div>
    <div class="item" v-for="(item,index) in GoodList1" :key="item.skuId">
      <div class="img"><img src="" alt="">
        <div>{{index+3}}</div>
      </div>
      <div class="good">{{item.skuName}}</div>
      <div class="danzi">{{item.count}}单</div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { NodeCollect, TJCollect, XTCollect, GoodCollect } from "@/api/home";
import * as echarts from "echarts";
import { ref } from "vue";
import { onMounted } from "vue";
interface IGood {
  amount: number;
  count: number;
  skuId: string;
  skuName: string;
}
interface IBin {
  name: string;
  value: number;
}
const zhexiantu = ref(null);
const bintu = ref(null);
const tongji = ref(null);
const GoodList = ref<IGood[]>([]);
const GoodList1 = ref<IGood[]>([]);
onMounted(async () => {
  let ZXdata = [];
  let res = await XTCollect();
  ZXdata = res;
  let myChart = echarts.init(zhexiantu.value as unknown as HTMLElement);
  myChart.setOption({
    xAxis: {
      type: "category",
      data: ZXdata.xAxis,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: ZXdata.series,
        type: "line",
        smooth: true,
      },
    ],
  });
});
onMounted(async () => {
  let ZZData = [];
  let res = await TJCollect();
  ZZData = res;
  console.log(res);

  let Chart = echarts.init(tongji.value as unknown as HTMLElement);
  Chart.setOption({
    xAxis: {
      type: "category",
      data: ZZData.xAxis,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: ZZData.series,
        type: "bar",
      },
    ],
  });
});
onMounted(() => {
  let BIdata: Array<IBin> = [];
  const getBIN = async () => {
    let res = await NodeCollect();
    BIdata = res;
    console.log(BIdata);
    let Chartxx = echarts.init(bintu.value as unknown as HTMLElement);
    Chartxx.setOption({
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: BIdata,
        },
      ],
    });
  };
  getBIN();
});

const getgood = async () => {
  let res = await GoodCollect();
  GoodList.value = res;
  GoodList1.value = res.filter((item, index) => index > 2);
};

getgood();
</script>
<style lang="less" scoped>
.top {
  margin-top: -15px;
  margin-left: -70px;
  .el-form {
    display: flex;
  }
  .el-button {
    margin-left: 10px;
  }
  .conter {
    margin-left: 30px;
    margin-top: 30px;
    .el-button {
      border: 0;
    }
  }
}
.span {
  margin-left: 300px;
  margin-top: 10px;
}
.kkk {
  margin-left: 250px;
  margin-top: 20px;
}
.shebei {
  font-size: 16px;
  font-weight: 800;
}
.yichang {
  position: fixed;
  top: 70%;
  right: 20%;
  z-index: 999;
  width: 460px;
  height: 130px;
}
.xiaoshoubang {
  position: fixed;
  top: 15%;
  right: 2%;
  z-index: 999;
  width: 266px;
  height: 100vh;
  .item {
    display: flex;
    margin-left: 20px;
    margin-top: 38px;
    .img {
      position: relative;
      div {
        position: absolute;
        top: -5px;
        left: 7px;
        font-size: 12px;
      }
    }
    .good {
      margin-left: 32px;
    }
    .danzi {
      margin-left: 58px;
      color: #999;
    }
  }
  .rightt {
    .span1 {
      font-size: 16px;
      font-weight: 800;
      margin-right: 20px;
    }
    .span2 {
      font-size: 13px;
      margin-right: 20px;
      color: #999;
    }
  }
}
.echartss {
  height: 250px;
}
.bottom {
  position: fixed;
  top: 70%;
  left: 16%;
  z-index: 999;
  width: 460px;
  height: 130px;
}
.echarts {
  width: 412px;
  height: 280px;
  margin-left: -956px;
  margin-top: -48px;
  margin-top: 140px;
}
.echarts1 {
  margin-top: -440px;
  margin-left: 500px;
}
.cord {
  width: 460px;
  height: 166px;
  background: #e9f3ff;
  background-image: url(),
    url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  border-radius: 20px;
  margin-right: 20px;
  .top {
    width: 419px;
    margin-top: -15px;
    margin-left: 30px;
    height: 18px;
    padding-top: 20px;
    .tongji {
      font-weight: 800;
      font-size: 16px;
    }
    .shijian {
      margin-left: 10px;
      color: #99999999;
    }
  }

  .tupian {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cen {
    width: 100px;
  }
  .bot {
    margin-top: 41px;
    height: 107px;
    margin-left: 6px;
    display: flex;
    .box {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .sum {
        font-size: 36px;
        color: #072074;
        font-weight: 800;
      }
      .sum1 {
        font-size: 12px;
        color: #91a7dc;
        margin-top: 10px;
      }
    }
  }
}
.bigcord {
  display: flex;
  margin-left: 50px;
}
</style>